@mixin single{
  button.g-button{
    padding-right: 20px;
    ion-icon[end]{
      display: none;
    }
  }
}

@mixin center{
  button.g-button{
    text-align: center;
  }
}
g-button-long {
  button.g-button {
    padding: 20px 45px 20px 20px;
    font-size: 15px;
    font-weight: 700;
    height: 60px;
    line-height: 20px;
    text-align: left;
    margin: 0;
    border-radius: 0;
    &.text-title {
      color: map_get($text-colors, title);
    }
    .button-inner {
      display: inline;
    }
    ion-icon[end] {
      font-size: 20px;
      font-weight: 700;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    small[end] {
      float: right;
      font-weight: 400;
      font-size: 15px;
      color: map_get($text-colors, info);
    }
    small[danger] {
      color: map_get($text-colors, danger);
    }
  }
  &[primary]{
    button.g-button{
      color: #4AA8F2;
    }
  }
  &[center]{
    @include center;
  }
  &[single]{
    @include single;
  }
  &[input]{
    @include single;
    @include center;
    button.g-button{
      font-weight: 400;
    }
  }
  &.success{
    button.g-button{
      padding-right: 20px;
      small {
        color: #00a500;
        ion-icon{
          vertical-align: top;
          position: relative;
          top: 1px;
        }
      }
      .ion-ios-arrow-forward{
        display: none;
      }
    }
  }
}

g-button-group {
  .g-button-group {
    margin: 20px;
    width: calc(100% - 40px);
    g-button-long {
      &:first-child {
        button {
          border-top-right-radius: 10px;
          border-top-left-radius: 10px;
        }
      }
      &:last-child {
        button {
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
        }
      }
    }
  }
}
